<template>
  <div>
    <el-row>
      <el-col :offset="8" :span="8">
        <el-card
          shadow="hover"
          class="submission_option"
          v-for="(submission, index) in submissionOption"
          :key="index"
        >
          <template #header>
            <div class="submission-header">
              <el-avatar :src="submission.picture"></el-avatar>
              <span class="header-nickname">{{ submission.nickname }}</span>
            </div>
          </template>
          <div v-html="submission.submissionContent"></div>
          <div class="submission-bottom">
            <!-- TODO 判断当前是否登录，没登陆显示 登录后才可查看联系方式 可点击-->
            <span class="bottom-way">
              {{ submission.contactWay }}
            </span>
            <span class="bottom-time">
              {{ submission.createdAt }}
            </span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  layout: "empty",
  data() {
    return {
      pageOption: {
        pageNum: 1, //页码
        pageSize: 10, //每页大小
        submissionType: 2, //投稿类型
        submissionContent: "bdshadahjsb", //投稿内容
        contactWay: "测试", //联系方式
      },
      submissionOption: [],
    };
  },
  mounted() {
    this.getSubmissionData();
  },
  methods: {
    async getSubmissionData() {
      const res = await this.$axios.$post(
        "/submission/search",
        this.pageOption
      );
      if (res.code / 100 != 2) {
        return;
      }
      console.log(res.data);
      this.submissionOption = res.data;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.submission_option {
  width: 480px;
  .submission-header {
    height: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .header-nickname {
      margin-left: 20px;
      font-size: 14px;
    }
  }
  .submission-bottom {
    justify-content: space-between;
    margin-top: 42px;
    display: flex;
    align-items: center;
    .bottom-way {
      font-size: 12px;
    }
    .bottom-time {
      font-size: 10px;
      color: gray;
    }
  }
}
</style>
